<table class="tr">
  <tr>
    <td width="100px">期号</td>
    <td>下注明细</td>
    <td width="70px">下注金额</td>
    <td width="70px">输赢金额</td>
  </tr>
</table>

<div class="scroll-data"><div class="for-scroll">
    <table>
    </table>
    <div>
        <div class="zxf_pagediv"></div>
    </div>
</div></div>

<div class="sum">
    <div class="count">下注金额：<span>0</span></div>
    <div class="win">输赢金额：<span>0</span></div>
    <div class="clear"></div>
</div>

<style type="text/css">
    .tr {
        width: 100%;
        height: 35px;
        color: #fff;
        font-size: 0.6rem;
    }
    .tr td {
        text-align: center;
        box-shadow: inset -1px 1px 0 0 rgba(255,255,255,.21), 1px 1px 0 0 rgba(0,0,0,.13);
        background-color: rgba(255,255,255,0.2);
    }
    .scroll-data table {
        width: 100%;
        font-size: 0.6rem;
        color: #fff;
    }
    .scroll-data table td {
        text-align: center;
        box-shadow: inset -1px 1px 0 0 rgba(255,255,255,.21), 1px 1px 0 0 rgba(0,0,0,.13);
        padding: 10px 1px 10px 1px;
    }
    .scroll-data {
        position: absolute;
        left: 0px;
        right: 0px;
        top: 35px;
        bottom: 45px;
        overflow: hidden;
    }
    .sum {
        position: absolute;
        left: 0px;
        right: 0px;
        bottom: 0px;
        height: 45px;
        color: #fff;
        font-size: 0.6rem;
        background-color: rgba(255,255,255,0.4);
        border-top: 1px solid #fff;
        line-height: 44px;
    }
    .sum .count {
        float: left;
        width: 66%;
        text-align: center;
    }
    .sum .win {
        float: right;
        padding-right: 20px;
    }
    .sum span {
        font-weight: bold;
    }
</style>

<script>
    $("#center-top .home").hide();
    $("#center-top .back").show();
    $("#center-top .menu").hide();

    Util.queryTemplate($(".scroll-data table"), ".zxf_pagediv", null, function(page, size, cb) {
        var data = {
            pageNum: page,
            pageSize: size,
            start: new Date().Format("yyyy-MM-dd"),
            end: new Date().Format("yyyy-MM-dd"),
            state: 1,
        };
        startLoading();
        CMD.query_bet_by_user(null, data, function(r) {
            stopLoading();
            cb(r);
        });
    }, function(table, list, sum) {
        if (Util.isEmpty(list)) {
            table.append("<tr><td colspan='4'>暂无数据</tr>");
            return;
        }

        for (var i in list) {
            var o = list[i];
            var tr = $("<tr></tr>");
            var target = Util.convertTarget(o.type, o.target);
            tr.append('<td width="100px">' + get_game_display_name(o.type) + "<br>" + o.issue + '</td>');
            tr.append("<td>" + target + "@" + o.rate + "</td>");
            tr.append("<td width='70px'>" + (o.amount / 100) + "</td>");
            if (o.profit >= 0)
                tr.append("<td class='red' width='70px'>" + (o.profit/100).toFixed(3) + "</td>");
            else
                tr.append("<td class='green' width='70px'>" + (o.profit/100).toFixed(3) + "</td>");
            table.append(tr);
        }
        _mainScroll.refresh();

        // sum
        $(".sum .count span").html((sum.amount/100));
        if (sum.profit >= 0) {
            $(".sum .win span").html("<span class='red'>" + (sum.amount/100) + "</span>");
        }
        else {
            $(".sum .win span").html("<span class='green'>" + (sum.amount/100) + "</span>");
        }
    }); 

    var _mainScroll;
    $(function() {
        _mainScroll = new IScroll(".scroll-data", {
            scrollX: false,
            scrollY: true,
            click: true,
        })
    });
</script>
